<template>
    <view>
        <cu-custom bgColor="bg-gradual-green" :isBack="true">
            <block slot="backText">返回</block>
            <block slot="content">修改收件信息</block>
        </cu-custom>

        <view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">
            <view class="cu-item">
                <view style="display:flex;flex-direction:row;align-items:center;">
                    <text class="text-grey">姓名：</text>
                    <input @input="onInputName"
                        class="text-black" ref="name" :value="address.name"/>
                </view>
            </view>
            <view class="cu-item">
                <view style="display:flex;flex-direction:row;align-items:center;">
                    <text class="text-grey">电话：</text>
                    <input @input="onInputPhone"
                        class="text-black" ref="phone" :value="address.phone"/>
                </view>
            </view>
            <view class="cu-form-group">
                <text class="text-grey">地址：</text>
                <picker mode="multiSelector" :range="region_range" :value="regionValue"
                    @columnchange="regionCol" @change="RegionChange">
                    <view class="my_picker">
                        {{region[0]}}，{{region[1]}}，{{region[2]}}
                    </view>
                </picker>
            </view>
            <view class="cu-item">
                <view style="display:flex;flex-direction:row;align-items:center;">
                    <text class="text-grey">详细地址：</text>
                    <input @input="onInputDetail"
                        class="text-black" ref="detail" :value="address.detail"/>
                </view>
            </view>
        </view>

        <view style="text-align: center;margin-top: 20rpx;">
            <button class="cu-btn bg-green shadow" @click="submit">提交修改</button>
        </view>
    </view>
</template>

<script>
import {COMMON_API} from '@/API.js';
import {USER_API} from '@/API.js';
import myRegion from './myRegion.js';
export default {
    data() {
        return {
            address: {
                'name': '',
                'phone': '',
                'province': '',
                'city': '',
                'district': '',
                'detail': ''
            },
            region: ['北京市', '北京市', '海淀区'],
            regionValue: [0, 0, 0],
            hint: {
                'name': '姓名',
                'phone': '电话',
                'detail': '详细地址'
            },
            region_range: [['a', 'b'], ['a', 'b'], ['a', 'b']]
        };
    },
    onLoad() {
        console.log('modifyAddress.vue: onLoad');
        uni.request({
            url: USER_API.userAddress.url,
            method: USER_API.userAddress.method,
            header: {'http-token': this.getToken()},
            success: function(res) {
                console.log('收件信息获取成功');
                this.address = res.data;
                uni.request({
                    url: COMMON_API.provinces.url,
                    method: COMMON_API.provinces.method,
                    header: {'http-token': this.getToken()},
                    success: function(r) {
                        console.log(r.data);
                        myRegion.initRegion(this, r.data);
                    }.bind(this)
                });
            }.bind(this)
        });
    },
    methods: {
        strReplace: function(str) {
            for (var item in this.hint) {
                str = str.replace(item, this.hint[item]);
            }
            return str;
        },
        onInputName: function(e) {
            this.address.name = e.target.value;
        },
        onInputPhone: function(e) {
            this.address.phone = e.target.value;
        },
        onInputDetail: function(e) {
            this.address.detail = e.target.value;
        },
        regionCol(e) {
            myRegion.changeRegion(this, e.detail);
        },
        RegionChange(e) {
            var val = e.detail.value;
            this.regionValue = val;
            this.region = [];
            for (var i = 0; i < 3; ++i)
                this.region.push(this.region_range[i][val[i]]);
        },
        submit: function() {
            this.address.province = this.region[0];
            this.address.city     = this.region[1];
            this.address.district = this.region[2];
            uni.request({
                url: USER_API.putUserAddress.url,
                method: USER_API.putUserAddress.method,
                header: {'http-token': this.getToken()},
                data: this.address,
                success: function(res) {
                    if (res.statusCode == 200) {
                        uni.showToast({
                            title: '修改成功'
                        });
                        setTimeout(function() {
                            uni.navigateBack({});
                        }, 1000);
                    } else {
                        uni.showToast({
                            title: this.strReplace(res.data),
                            icon: 'none',
                            duration: 2000
                        });
                    }
                }.bind(this)
            });
        }
    }
};
</script>

<style>
    picker .my_picker {
        line-height: 100upx;
        font-size: 28upx;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 100%;
        text-align: left;
    }

    .my_picker::after {
        font-family: cuIcon;
        display: block;
        content: "\e6a3";
        position: absolute;
        font-size: 34upx;
        color: #8799a3;
        line-height: 100upx;
        width: 60upx;
        text-align: center;
        top: 0;
        bottom: 0;
        right: -20upx;
        margin: auto;
    }
</style>
